<template>
  <!-- 自定义表单 -->
  <BasicForm @register="registerForm" @submit="handleSubmit" style="margin-top: 50px; margin-left: 50px">
    <template #formHeader>
    </template>
    <template #formFooter>
      <div style="margin: 0 auto">
        <a-button type="primary" @click="save" class="mr-2"> 保存 </a-button>
      </div>
    </template>
  </BasicForm>
</template>

<script lang="ts" setup>
//引入依赖
import { useForm, BasicForm, FormSchema } from '/@/components/Form';

//自定义表单字段
const formSchemas: FormSchema[] = [
  {
    label: '旧传感器',
    field: 'name',
    component: 'Input',
  },
  {
    label: '性别',
    field: 'sex',
    component: 'Select',
    //填写组件的属性
    componentProps: {
      options: [
        { label: '男', value: 1 },
        { label: '女', value: 2 },
        { label: '未知', value: 3 },
      ],
    },
    //默认值
    defaultValue: 3,
  },
  {
    label: '年龄',
    field: 'age',
    component: 'Input',
  },
  {
    label: '入职时间',
    subLabel: '( 选填 )',
    field: 'entryTime',
    component: 'TimePicker',
  },
];

/**
 * BasicForm绑定注册;
 */
const [registerForm, {setFieldsValue,validate, resetFields }] = useForm({
  schemas: formSchemas,
  //隐藏操作按钮
  showActionButtonGroup: false,
  alwaysShowLines: 2,
  baseColProps: { span: 12 },
});

/**
 * 保存
 */
async function save() {
  //使用useForm方法获取表单值
  let values = await validate();
  console.log(values);
}

/**
 * 保存草稿
 */
async function saveDraft() {
  //使用useForm方法validate获取表单值
  let values = await validate();
  console.log(values);
}

/**
 * 重置
 */
async function reset() {
  //使用useForm方法resetFields清空值
  await resetFields();
}
</script>

<style scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%;
}

:deep(.ant-picker) {
  width: 100%;
}
</style>
